<template><!--这里是用户端的top栏-->
    <div class="div">
        <el-col class="div" style="flex-direction: column;">
            <el-row class="row01">
            <el-col class="logo-col"><!--logo-->
                <img src="../../assets/img/common/logo.png" class="logo">
            </el-col>
            <el-col class="five">
                <router-link :to="{ name: 'main' }" tag="button" class="btn" @click.native="change('main')" id="main">
                    <span :class="showMain?'change':'font'">首页</span>
                </router-link>
            </el-col>
            <el-col class="five"><!--图书借阅-->
                <router-link :to="{ name: 'borrow' }" tag="button" class="btn" @click.native="change('borrow')">
                    <span :class="showBorrow?'change':'font'">图书借阅</span>
                </router-link>  
            </el-col>
            <el-col class="five"><!--图书共享-->
                <router-link :to="{ name: 'share' }" tag="button" class="btn" @click.native="change('share')">
                    <span :class="showShare?'change':'font'">图书共享</span>
                </router-link>
            </el-col>
            <el-col class="five"><!--资源检索-->
                <router-link :to="{ name: 'search' }" tag="button" class="btn"  @click.native="change('search')">
                    <span :class="showSearch?'change':'font'">资源检索</span>
                </router-link>
            </el-col>
            <el-col class="five"><!--图书推荐-->
                <router-link :to="{ name: 'recommend' }" tag="button" class="btn"  @click.native="change('recommend')">
                    <span :class="showRecommend?'change':'font'">图书推荐</span>
                </router-link>
            </el-col>
            <el-col class="five"><!--个人中心-->
                <router-link :to="{ name: 'person' }" tag="button" class="btn"  @click.native="change('person')">
                    <span :class="showPerson?'change':'font'">个人中心</span>
                </router-link>
            </el-col>
            <el-col  class="msg-col"><!--通知logo-->
                <router-link :to="{ name: 'tell' }" tag="button" class="btn"  @click.native="change('tell')">
                    <img src="../../assets/img/common/msg.jpg" class="msglogo">
                </router-link>
            </el-col>
        </el-row>
        <el-row>
            <router-view :key="$router.fullPath">
            </router-view>
        </el-row>
        </el-col>
        

    </div>
</template>

<script>

export default{
    name:"top",
    data(){
        return{
            showBorrow:false,
            showPerson:false,
            showRecommend:false,
            showSearch:false,
            showShare:false,
            showMain:true

        }
    },
    methods:{
        change(name){
            console.log(name)
            this.init()
            if(name==='borrow'){
                this.showBorrow=true
            }else if(name==='share'){
                this.showShare=true
            }else if(name==='person'){
                this.showPerson=true;
            }else if(name==='recommend'){
                this.showRecommend=true;
            }else if(name==='search'){
                this.showSearch=true;
            }else if(name==='main'){
                this,this.showMain=true;
            }else if(name==='tell'){
                console.log('tell')
                this.init()
            }
        },
        init(){
            this.showBorrow=false
            this.showPerson=false
            this.showRecommend=false
            this.showSearch=false
            this.showShare=false
            this.showMain=false
        },
        

    
    },
    mounted(){
        //默认打开首页
        this.$nextTick(() => {
        this.$router.push({ name: 'main' });
    });
}

}
</script>

<style scoped>
.div{
    height:100vh;
    width:100wh;
    display: flex;
}
.row01{
    height:100px;
    width:100%;
    display: flex;
    background-color: rgba(168, 189, 203, 1);
    
}
.five{
    height:100%;
    width:15%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
}

.logo{
    height:100%;
    width:auto;
}
.logo-col{
    height:100%;
    width:15%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn{
    background-color: transparent;
    border-color:transparent;
    cursor: pointer;
}
.font{
    font-size:22px;
    color:white;
}
.font:hover{
    color:rgba(6, 47, 212, 0.462);
}
.msglogo{
    height:60px;
    width:auto;
}
.msg-col{
    height:100%;
    width:10%;
    display: flex;
    align-items: center;
    padding-right: 10px;
}
.change{
    color:rgba(6, 47, 212, 0.462);
    font-size:22px;
}

</style>

